<template>
<view class="container">
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			id="0"
			:data-current="0"
			:class="{ 'active': active == 'school' }"
			@click="onTabClick('school')">
			<text class="tab-view-item--text">我校</text>
		</view>
		<view class="tab-view-item"
			id="1"
			:data-current="1"
			:class="{ 'active': active == 'union' }"
			@click="onTabClick('union')">
			<text class="tab-view-item--text">教盟</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 我校 -->
		<swiper-item class="swiper-item">
			<!-- 顶部轮播 -->
			<swiper class="swiper-view"
				autoplay
				circular
				skip-hidden-item-layout
				indicator-dots
				indicator-color="#FFFFFF"
				indicator-active-color="#007AFF"
				:interval="2000"
				:duration="500">
				<swiper-item v-for="(item, index) in bannerList"
					:key="index"
					@click="onItemClick('subject', item, 'courseid')">
					<image class="swiper-view--image"
						:src="item.path"
						mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!-- 我的直播课程 -->
			<view class="section">
				<view class="section-header"
					@click="onMoreItem('school', 'live')">
					<view class="section-title">
						<view class="section-prefix"></view>
						<text class="sec-left">我的直播课程</text>
					</view>
					<view class="section-suffix">
						<text>查看更多</text>
						<uni-icons type="arrowright" size="16" color="#999999" />
					</view>
				</view>
				<view class="section-body">
					<scroll-view class="scroll-view-h"
						scroll-x="true"
						scroll-left="0">
						<view class="scroll-view-item"
							v-for="item in myLiveList"
							:key="item.id"
							:style="{ width: cardWidth + 'px' }">
							<view class="subject-card"
								@click="onItemClick('subject', item)">
								<view class="subject-mask">
									<image class="subject-cover"
										:src="item.cover.middle"
										mode="aspectFill" />
									<view class="subject-text">
										<text>{{ item.startTime }}</text>
										<text class="sec-left">直播</text>
									</view>
								</view>
								<view class="subject-subtitle line-clamp-2">{{ item.subtitle }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 在学课程 -->
			<view class="section sec-top">
				<view class="section-header"
					@click="onMoreItem('school', 'learning')">
					<view class="section-title">
						<view class="section-prefix"></view>
						<text class="sec-left">在学课程</text>
					</view>
					<view class="section-suffix">
						<text>查看更多</text>
						<uni-icons type="arrowright" size="16" color="#999999" />
					</view>
				</view>
				<view class="section-body">
					<uni-grid :column="2"
						:showBorder="false"
						:square="false">
						<uni-grid-item v-for="item in myLearningList"
							:key="item.id">
							<view class="subject-card"
								@click="onItemClick('subject', item)">
								<view class="subject-mask">
									<image class="subject-cover"
										:src="item.courseSet && item.courseSet.cover && item.courseSet.cover.middle"
										mode="aspectFill" />
									<view class="subject-text">
										<text>{{ item.startTime || '--' }}</text>
										<text class="sec-left">直播</text>
									</view>
								</view>
								<view class="subject-title line-clamp-1">{{ item.title }}</view>
								<view class="subject-info">
									<image class="subject-avatar"
										:src="item.teachers[0].avatar.small"
										mode="aspectFill" />
									<text class="sec-left">{{ item.teachers[0].nickname }}</text>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
			<!-- 我的任务 -->
			<view class="section sec-top">
				<view class="section-header"
					@click="onMoreItem('school', 'task')">
					<view class="section-title">
						<view class="section-prefix"></view>
						<text class="sec-left">我的任务</text>
					</view>
					<view class="section-suffix">
						<text>查看更多</text>
						<uni-icons type="arrowright" size="16" color="#999999" />
					</view>
				</view>
				<view class="task-list">
					<view class="task-item border"
						@click="onMoreItem('school', 'task', 'homework')">
						<view class="task-item-content">
							<text class="iconfont icon-list"></text>
							<text class="sec-left">待完成作业</text>
						</view>
						<view class="task-item-action">
							<text>{{ homeworkCnt }}条</text>
							<uni-icons type="arrowright" size="16" color="#999999" />
						</view>
					</view>
					<view class="task-item border"
						@click="onMoreItem('school', 'task', 'message')">
						<view class="task-item-content">
							<text class="iconfont icon-comment"></text>
							<text class="sec-left">通知</text>
						</view>
						<view class="task-item-action">
							<text>{{ notificationCnt }}条</text>
							<uni-icons type="arrowright" size="16" color="#999999" />
						</view>
					</view>
					<view class="task-item border"
						@click="onMoreItem('school', 'task', 'sign')">
						<view class="task-item-content">
							<text class="iconfont icon-sign"></text>
							<text class="sec-left">打卡</text>
						</view>
						<view class="task-item-action">
							<text>暂无</text>
							<uni-icons type="arrowright" size="16" color="#999999" />
						</view>
					</view>
					<view class="task-item"
						@click="onMoreItem('school', 'task', 'live')">
						<view class="task-item-content">
							<text class="iconfont icon-play"></text>
							<text class="sec-left">直播课</text>
						</view>
						<view class="task-item-action">
							<text>{{ liveCnt }}条</text>
							<uni-icons type="arrowright" size="16" color="#999999" />
						</view>
					</view>
				</view>
			</view>
		</swiper-item>
		<!-- 教盟 -->
		<swiper-item class="swiper-item">
			<!-- 顶部轮播 -->
			<swiper class="swiper-view"
				autoplay
				circular
				skip-hidden-item-layout
				indicator-dots
				indicator-color="#FFFFFF"
				indicator-active-color="#007AFF"
				:interval="2000"
				:duration="500">
				<swiper-item @click="onItemClick('subject', { id: 1 })">
					<image class="swiper-view--image"
						src="/static/banner.png"
						mode="aspectFill" />
				</swiper-item>
			</swiper>
			<!-- 直播课程 -->
			<view class="section">
				<view class="section-header"
					@click="onMoreItem('union', 'live')">
					<view class="section-title">
						<view class="section-prefix"></view>
						<text class="sec-left">直播课程</text>
					</view>
					<view class="section-suffix">
						<text>查看更多</text>
						<uni-icons type="arrowright" size="16" color="#999999" />
					</view>
				</view>
				<view class="section-body">
					<scroll-view class="scroll-view-h"
						scroll-x="true"
						scroll-left="0">
						<view class="scroll-view-item"
							v-for="item in liveList"
							:key="item.id"
							:style="{ width: cardWidth + 'px' }">
							<view class="subject-card"
								@click="onItemClick('subject', item)">
								<view class="subject-mask">
									<image class="subject-cover"
										:src="item.cover.middle"
										mode="aspectFill" />
									<view class="subject-text">
										<text>{{ item.startTime }}</text>
										<text class="sec-left">直播</text>
									</view>
								</view>
								<view class="subject-subtitle line-clamp-2">{{ item.subtitle }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<!-- 推荐课程 -->
			<view class="section sec-top">
				<view class="section-header"
					@click="onMoreItem('union', 'hot')">
					<view class="section-title">
						<view class="section-prefix"></view>
						<text class="sec-left">推荐课程</text>
					</view>
					<view class="section-suffix">
						<text>查看更多</text>
						<uni-icons type="arrowright" size="16" color="#999999" />
					</view>
				</view>
				<view class="section-body">
					<uni-grid :column="2"
						:showBorder="false"
						:square="false">
						<uni-grid-item v-for="item in recommendedList"
							:key="item.id">
							<view class="subject-card"
								@click="onItemClick('subject', item)">
								<view class="subject-mask">
									<image class="subject-cover"
										:src="item.cover && item.cover.middle"
										mode="aspectFill" />
									<view class="subject-text">
										<text>{{ item.startTime || '--' }}</text>
										<text class="sec-left">直播</text>
									</view>
								</view>
								<view class="subject-title line-clamp-1">{{ item.title }}</view>
								<view class="subject-info">
									<image class="subject-avatar"
										:src="item.teachers[0].avatar.small"
										mode="aspectFill" />
									<text class="sec-left">{{ item.teachers[0].nickname }}</text>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
			</view>
		</swiper-item>
	</swiper>
</view>
</template>

<script>
import { getBanners, getMyLiveCourses, getMyLearning, getNotifications, getMyTask, getAllCourses, getMyClassInfo, getSignIn } from '@/api/index.js';
const baseURL = 'http://edu.ypywh.com';
const app = getApp();
export default {
	data() {
		return {
			active: 'union',
			tabIndex: 1,
			cardWidth: parseInt((app.safeWidth - 12) / 2),
			baseURL,
			bannerList: [],
			myLiveList: [],
			myLearningList: [],
			homeworkCnt: 0,
			notificationCnt: 0,
			liveCnt: 0,
			liveList: [],
			recommendedList: []
		}
	},
	onShow() {
		getAllCourses({
			type: 'live'
		}).then(res => {
			this.liveList = res.list || [];
		});
		getAllCourses({
			type: 'live',
			recommended: 1
		}).then(res => {
			this.recommendedList = res.list || [];
		});
		const token = uni.getStorageSync('X-Auth-Token');
		if (token) {
			getBanners('jianmo:home_top_banner').then(res => {
				this.bannerList = (res.list || []).filter(item => item.status === '1').map(item => {
					return {
						...item,
						path: this.baseURL + item.src
					}
				});
			});
			getMyLiveCourses().then(res => {
				this.myLiveList = res.list || [];
			});
			getMyLearning().then(res => {
				this.myLearningList = res.list || [];
			});
			getMyTask('homework').then(res => {
				this.homeworkCnt = (res.list || []).length;
			});
			getNotifications().then(res => {
				this.notificationCnt = res.total || 0;
			});
			getMyTask('live').then(res => {
				this.liveCnt = (res.list || []).length;
			});
			getMyClassInfo().then(res => {
				let id = res.data && res.data.id;
				getSignIn(id).then(res => {
					// TODO
				});
			});
		}
	},
	methods: {
		onTabClick(type) {
			this.active = type
			this.tabIndex = (type == 'school') ? 0 : 1
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			const token = uni.getStorageSync('X-Auth-Token');
			if (index == 0 && !token) {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
			this.tabIndex = index;
			this.active = index == 0 ? 'school' : 'union';
		},
		onMoreItem(module, type, category) {
			if (type == 'task') {
				if (!category) {
					category = 'homework'
				}
				uni.navigateTo({
					url: `/pages/task/task?type=${ type }&category=${ category }&from=index`
				})
			}
			else {
				uni.navigateTo({
					url: `/pages/subject/subject?module=${ module }&type=${ type }&from=index`
				})
			}
		},
		onItemClick(type, item, param) {
			if (!param) {
				uni.navigateTo({
					url: `/pages/${ type }/detail?id=${ item.id }&from=index`
				});
			}
			else {
				let id = this.getByParam(item.href, param);
				if (id) {
					uni.navigateTo({
						url: `/pages/${ type }/detail?id=${ id }&from=index`
					});
				}
			}
		},
		getByParam(path, param)
		{
			if (!path.trim()) return null;
		   const query = path.split('?')[1];
		   const params = query.split("&");
		   for (let i = 0; i < params.length; i++) {
				let pair = params[i].split("=");
				if (pair[0] == param) {
					return pair[1];
				}
		   }
		}
	},
	// 导航栏操作
	onNavigationBarButtonTap(button) {
		// #ifdef APP-PLUS
		if (button.index == 0) {	// 扫码
			uni.scanCode({
				success(res) {
					console.log('scan success: ', res)
				},
				complete() {
					console.log('scan complete')
				}
			})
		}
		if (button.index == 1) {	// 消息通知
			uni.navigateTo({
				url: '/pages/message/message?from=index'
			})
		}
		// #endif
		// #ifndef APP-PLUS
		if (button.index == 0) {	// 消息通知
			uni.navigateTo({
				url: '/pages/message/message?from=index'
			})
		}
		// #endif
	},
	// 搜索框
	onNavigationBarSearchInputClicked(e) {
		console.log('ss')
		uni.navigateTo({
			url: '/pages/subject/result?from=index'
		})
	}
}
</script>
